<template>
  <div>
    <div id="left">
      <el-tooltip content="查看地址" placement="top" effect="light">
        <el-button>我的地址</el-button>
      </el-tooltip>
      <div class="tc-data-list">
        <div class="tc-list">
          <ul class="detail-list">
            <li class="qa-item" v-for="(item,index) in items" :key="index">
              <div class="fl record">
                <div class="number">
                  <div class="border answer">
                    <a href="#" class="star">
                      <i class="fa fa-star-o" aria-hidden="true"></i>
                    </a>
                  </div>
                  <div class="border answer">
                    <el-button type="success" icon="el-icon-delete"></el-button>
                  </div>
                  <div class="border answer">
                    <el-button type="success" icon="el-icon-edit" circle></el-button>
                  </div>
                </div>
              </div>
              <div class="info">
                <div class="fl date">
                  <p class="text">{{item.createDateStr}}</p>
                </div>
                <br>
                <div class="other">
                  <h2>
                    <a id="title" :href="item.url" target="_blank">{{item.title}}</a>
                  </h2>
                </div>

                <div class="other">
                  <p class="text">{{item.addressDesc}}</p>
                </div>
              </div>
              <div class="clearfix"></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div id="center">
      <hr>
    </div>

    <div id="left1">
      <el-tooltip content="查看收藏" placement="top">
        <el-button>我的收藏</el-button>
      </el-tooltip>

      <div class="tc-data-list">
        <div class="tc-list">
          <ul class="detail-list">
            <li class="qa-item" v-for="(item,index) in items" :key="index">
              <div class="fl record">
                <div class="number">
                  <div class="border answer">
                    <el-button type="info" icon="el-icon-delete"></el-button>
                  </div>
                </div>
              </div>
              <div class="info">
                <div class="fl date">
                  <p class="text">{{item.createDateStr}}</p>
                </div>
                <br>
                <div class="other">
                  <h2>
                    <a id="title" :href="item.url" target="_blank">{{item.title}}</a>
                  </h2>
                </div>

                <div class="other">
                  <p class="text">{{item.addressDesc}}</p>
                </div>
              </div>
              <div class="clearfix"></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="fl right-tag">
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
        <el-radio-button :label="false">展开</el-radio-button>
        <el-radio-button :label="true">收起</el-radio-button>
      </el-radio-group>
      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">操作</span>
          </template>
          <el-menu-item-group>
            <span slot="title">我的地址</span>
            <el-menu-item index="1-2">添加</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>
<style>
#center {
  float: left;
  width: 60px;

  text-align: center;
}
#left {
  float: left;
  width: 600px;
  text-align: center;
}
#left1 {
  float: left;
  width: 600px;
  text-align: center;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
#title {
  color: rosybrown;
  text-decoration: none;
  size: 20px;
  font-family: "PingFang SC";
}
</style>

<script>
import "~/assets/square/bootstrap.min.css";
import "~/assets/page-sj-spit-index.css";
import addressApi from "@/api/address";
import { getUser } from "@/utils/auth";
 console.log(getUser())
export default {
  layout: "square",
  data() {
    return {
      pageNo: 1,
      isCollapse: true,
      uid: ''
    };
  },
  mounted(){
    
   
  },
  asyncData() {
    return addressApi.findAllAddressesByUserId(3).then(res => {
   
      return { items: res.data.rows };
    });
  },
  methods: {
    
    handleOpen(key, keyPath) {
       
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>